<template>
	<ul class="zyzq-footer-ul">
		<li v-for="(item,index) of navData" :key="index" class="tabItem" @click.native="linkLive" :class="{'router-link-active':myPath===item.url}">
			<template v-if="item.hasRouter">
				<a href="javascript:void(0)" :id="item.id" @click="goFullView(item.url)">
					<div :class='item.iconClass' ></div>
					<p class=" nav-icon-title">{{ item.title}}</p>
				</a>
			</template>
			<template v-else>
				<li id="middle-logo">
          <div v-if="isPlay" class="back-look" @click="backPlay">
            <div class="look-circle">
              <img src="../../assets/images/zyzq/zyzq-play.png">
            </div>
          </div>
					<img v-else class="nav3" :src="sysInfo.icon +'?x-oss-process=image/resize,m_fixed,h_98,w_98'"  @click="clickMiddleIcon">
				</li>
			</template>
		</li>
	</ul>
</template>
<script>
	import fun from "../../util/function";
	export default {
		data() {
			return {
				myPath: '', //路由地址 url
				navData: [{
						url: 'zyzqHome',
						iconClass: 'navIconPic_1',
						title: '首页',
            hasRouter: true,
            id:'footer_shouye'//zyzq埋点
					},
					{
						hasRouter: false
					},
					{
						url: 'mine',
						iconClass: 'navIconPic_5',
						title: '账号',
            hasRouter: true,
            id:'footer_zhanghao'//zyzq埋点
					}
				],
				bottom: true,
				isPlay: false,
				backVideoUrl: this.$lockr.get('PlayBackVideoUrl')
			}
		},
		created() {
			this.mobMsg()
			this.$store.dispatch("showNav")

		},
		mounted() {
			// 初始化页面navTab高亮显示
			this.myPath = this.$route.path.split('/')[2];
			//显示底部播放按钮否 ？
			if(this.backVideoUrl) {
				this.isPlay = true
			}
		},
		watch: {
			// 监听路由navTab高亮显示
			$route(to, from) {
				this.myPath = to.path.split('/')[2];
			}
		},
		props: {},
		computed: {
			sysInfo() {
				return this.$store.state.SysOrgInfo;
			}
		},
		methods: {
			clickMiddleIcon(){
				fun.ykDisposeFun("暂无播放节目，选个视频看看吧")
			},
			linkLive() {
				this.$store.state.liveNavCur = 1;
			},
			goFullView(url) {
				if(this.$store.state.isYk && url == 'mine') { //游客
					let jointUrl = fun.getCurPageUrl('home');
					fun.ykDisposeFun(jointUrl)
					return
		        }       
               //replace 清除以前的所有历史记录
				this.$router.replace(`/${this.$channel}/${url}`)
			},
			mobMsg() {
				this.$emit('update:msgParent', this.bottom)
			},
			  backPlay() { //观看  最后一次浏览过的某 直播间、精彩视频
				window.location.href = this.backVideoUrl
			}
		}
	};
</script>
<style scoped="scoped">
	@keyframes keyNavBottom {
		0% {
			transform: scale(1);
		}
		25% {
			transform: scale(1.1);
		}
		50% {
			transform: scale(0.9);
		}
		75% {
			transform: scale(1.1);
		}
		100% {
			transform: scale(1);
		}
	}
	
	.zyzq-footer-ul {
		height: 96px;
		display: flex;
		display: -webkit-flex;
		justify-content: space-around;
		-webkit-justify-content: space-around;
		align-items: center;
		margin-top: 35px;
	}
	
	.zyzq-footer-ul li {
		width: 19%;
		height: 92%;
	}
	
	#middle-logo {
		width: 98px;
		height: 98px;
		position: absolute;
		bottom: 10px;
	}
	
	#middle-logo img {
		display: block;
		width: 98px;
		height: 98px;
	}
	
	.tabItem a {
		display: block;
		width: 100%;
	}
	
	.router-link-active p {
		color: #EB3C3C;
	}
	
	.tabItem div {
		width: 40px;
		height: 40px;
		margin: 0 auto;
	}
	
	.router-link-active .navIconPic_1 {
		background: url("../../assets/images/zyzq/zyzq-home2.png") no-repeat;
		background-size: 40px;
		animation: keyNavBottom 0.3s ease-in;
	}
	
	.navIconPic_1 {
		background: url("../../assets/images/zyzq/zyzq-home1.png") no-repeat;
		background-size: 40px;
	}
	
	.router-link-active .navIconPic_5 {
		background: url("../../assets/images/zyzq/zyzq-mine2.png") no-repeat;
		background-size: 40px;
		animation: keyNavBottom 0.3s ease-in;
	}
	
	.navIconPic_5 {
		background: url("../../assets/images/zyzq/zyzq-mine1.png") no-repeat;
		background-size: 40px;
	}
	
	.nav-icon-title {
		height: auto;
		color: #CCCCCCFF;
		font-size: 20px;
		text-align: center;
		margin-top: 10px;
	}
	
	/* #middle-logo .back-play {
		width: 90px;
		height: 80px;
	} */

	/* 去掉img标签的默认灰色边框 */
	img[src=""],
	img:not([src]) {
		opacity: 0;
	}

  #middle-logo .back-look {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    border: 2px solid #C31D1D;
    padding: 4px;
  }

  #middle-logo .look-circle {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: linear-gradient(0deg, #C31D1D 0%, #EB3C3C 100%);
    box-shadow: 0px 15px 9px 0px rgba(229, 56, 56, 0.19);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #middle-logo .look-circle img {
    display: block;
    width: 30px;
    height: 34px;
  }
</style>